import {
  BrowserRouter,
  Link,
  Outlet,
  Route,
  Routes,
  useNavigate,
  useRoutes,
} from "react-router-dom";
import "./App.css";

const NavMenu = ({ to, children }) => (
  <div className=" border-x border-gray-500 border-solid px-10 py-1 whitespace-nowrap">
    <Link to={to}>{children}</Link>
  </div>
);

const Menu = () => (
  <div>
    <header className=" w-full h-14 flex flex-row justify-start items-center bg-blue-200 ">
      <NavMenu to="./">首页</NavMenu>
      <NavMenu to="./list">新闻列表</NavMenu>
      <NavMenu to="./about">关于我们</NavMenu>
      <NavMenu to="./hot">热点新闻</NavMenu>
    </header>
    <Outlet />
  </div>
);

const List = () => {
  const navigate = useNavigate();
  console.log("navigate", navigate);
  return (
    <div>
      新闻列表--pages
      <button onClick={() => navigate("/")}>去首页</button>
    </div>
  );
};

const routes = [
  {
    path: "/",
    element: <Menu />,
    children: [
      {
        path: "/list",
        element: <List />,
      },
      {
        path: "/about",
        element: <div>关于我们--pages</div>,
      },
      {
        path: "/hot",
        element: <div>热点新闻--pages</div>,
      },
    ],
  },
];

const Routing = () => useRoutes(routes);

function App() {
  return (
    <BrowserRouter>
      <Routing />
    </BrowserRouter>
  );
}

export function App_1() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Menu />}>
          <Route path="/list" element={<List />} />
          <Route path="/about" element={<div>关于我们--pages</div>} />
          <Route path="/hot" element={<div>热点新闻--pages</div>} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;
